<template>
	<view class="MainBox">
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">←</view>
			<view class="page-title">修改家属信息</view>
		</view>
		<view class="PersonalInformation">
			<view class="inputItem">
				<view class="textBox">姓名</view>
				<input
					class="inputName"
					type="text"
					placeholder="请输入姓名" 
					v-model="name"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>
			<view class="inputItem">
				<view class="textBox">关系</view>
				<input
					class="inputRelation"
					type="text"
					placeholder="请输入与老人的关系" 
					v-model="relation"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>
			<view class="inputItem">
				<view class="textBox">电话</view>
				<input
					class="inputNumber" 
					type="number" 
					placeholder="请输入手机号" 
					v-model="phone"
					placeholder-style="color:#ccc;font-size:14px;"
					maxlength="11"
				/>
			</view>
			<view class="inputItem">
				<view class="textBox">家庭住址</view>
				<input
					class="inputaddress" 
					type="text" 
					placeholder="请输入详细家庭住址" 
					v-model="address"
					placeholder-style="color:#ccc;font-size:14px;"
				/>
			</view>
		</view>
	</view>
	<view class="edit">
		<button class="edit-btn save-btn" @click="yesEdit">保存</button>
		<button class="edit-btn cancel-btn" @click="noEdit">取消</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				infoList:[{name:'',	relation:'', phone:'', address:''}]
			}
		},
		methods:{
			goBack(){
				uni.navigateBack();
			},
			yesEdit() {
				// 表单验证
				if (!this.validateForm()) {
					return;
				}
				uni.showLoading({
					title: '保存中...'
				});
				uni.navigateBack();
			},
			noEdit() {
				uni.showModal({
					title: '提示',
					content: '确定放弃修改吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			},
			validateForm() {
				if (!this.userInfo.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.userInfo.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return false;
				}
				
				if (this.userInfo.age && (this.userInfo.age < 1 || this.userInfo.age > 150)) {
					uni.showToast({
						title: '年龄范围1-150',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			}
		}
	}
</script>

<style>
	.MainBox {
	  width: 100vw;
	  min-height: 100vh;
	  background-color: #fff;
	  padding-bottom: 60px;
	}
	.nav-bar {
		height: 80px;
		background-color: #fff8f0;
		display: flex;
		align-items: center;
		padding: 0 15px;
		border-bottom: 1px solid #ffd5b8;
	}
	
	.back-btn {
		font-size: 20px;
		color: #ff7d00;
	}
	
	.page-title {
		font-size: 18px;
		font-weight: 600;
		color: #ff7d00;
		margin-left: 10px;
	}
	.PersonalInformation{
		padding: 20px;
		border: 1px sandybrown;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}
	.inputItem{
		display: flex;
		align-items: center;
		margin-bottom: 18px;
		height:44px;
	}
	.textBox{
		width: 80px;
		font-size: 14px;
		margin-right: 10px;
	}
	.inputName,
	.inputRelation,
	.inputNumber,
	.inputaddress{
		flex:1;
		height: 100%;
		font: 14px;
		padding: 0 5px;
	}
	.editBar{
		padding: 15px 20px;
		text-align: right;
	}
	.editBtn{
		padding: 8px 16px;
		border: none;
		border-radius: 4px;
		font-size: 14px;
	}
</style>